import React from 'react';

import User from 'service/user-service.jsx';
import MUtil from 'util/mm.jsx';
import './index.scss';

const _user = new User();
const _mm = new MUtil();


class Login extends React.Component {
    constructor(props) {
        super(props);
        console.log('constructor')
        this.state = {
            username: '',
            password: '',
            redirect: _mm.getUrlParam('redirect') || '/'
        }
    }

    componentWillMount() {
        document.title = "登录 - SPACE MALL"
    }
    onInputKeyUp(e) {
        if(e.keyCode === 13) {
            this.onSubmit()
        }
    }
    //当用户名和输入框值发生改变
    onInputChange(e) {
        let inputName = e.target.id,
            inputValue = e.target.value;
        this.setState({
            [inputName]: inputValue
        })
    }
    //当用户提交表单
    onSubmit(e) {
        let loginInfo = {
            username: this.state.username,
            password: this.state.password
        },
        checkResult = _user.checkLoginInfo(loginInfo);

        //验证通过,这是service里面自己写的函数来验证
        if (checkResult.status) {
            _user.login(loginInfo).then(res => {
               _mm.setStorage('userInfo', res)
                this.props.history.push(this.state.redirect);
                console.log(this.state.redirect)
                console.log('end')
            }, errMsg => {
                _mm.errorTips(errMsg);
            })
        }

        //验证不通过
        else {
            _mm.errorTips(checkResult.msg);
        }

        
    }
    render() {
        return (
            <div className="row">
                <div className="col-md-4 col-md-offset-4">
                    <div className="panel panel-default login-panel">
                        <div className="panel-heading">欢迎登录 - SPACEMALL管理系统</div>
                        <div className="panel-body">

                            <div>
                                <div className="form-group">
                                    <label htmlFor="exampleInputEmail1">用户名</label>
                                    <input type="text"
                                        className="form-control"
                                        id="username"
                                        onKeyUp={e => this.onInputKeyUp(e)}
                                        placeholder="请输入用户名"
                                        onChange={e => this.onInputChange(e)} />
                                </div>
                                <div className="form-group">
                                    <label htmlFor="exampleInputPassword1">密码</label>
                                    <input type="password"
                                        className="form-control"
                                        id="password"
                                        placeholder="请输入密码"
                                        onKeyUp={e => this.onInputKeyUp(e)}
                                        onChange={e => this.onInputChange(e)} />
                                </div>

                                <button className="btn btn-lg btn-primary btn-block"
                                    onClick={e => this.onSubmit(e)}>登录</button>
                            </div>

                        </div>
                    </div>
                </div>
            </div>



        )
    }
}

export default Login